<template>
	<view class="container">
		<view class="top">
			<view class="position" @click="ToCity()"><view class="img"><image src="../../static/position2.png"/></view><view class="city">{{CityName}}</view></view>
			<view class="search"><view class="icon"><image src="/static/search.png" /></view><view class="input"><input type="text" placeholder="输入达人昵称搜索" @input="InputNickName" confirm-type="search" @confirm="Search"/></view></view>
			<view class="btn" @click="Search()">搜索</view>
		</view>
		<view class="plat">
			<view class="line" :class="Plat==1?'select':''" @click="ClickPlat(1)"><view class="icon"><image src="/static/douyin.png" /></view><view class="name">抖音</view></view>
			<view class="line" :class="Plat==2?'select':''" @click="ClickPlat(2)"><view class="icon"><image src="/static/xiaohongshu.png" /></view><view class="name">小红书</view></view>
		</view>
		<view class="category"><view class="square1" :class="Type==0?'select':''" @click="ClickType(0)">全部</view><view class="square2" :class="Type==1?'select':''" @click="ClickType(1)">年轻时尚达人</view><view class="square3" :class="Type==2?'select':''" @click="ClickType(2)">同城美食达人</view></view>
		<view class="darenlist">			
			<view class="list" @click="DaRenInfo(item.ID)" v-for="item in List">
				<view class="headimg"><image :src="item.HeadImg"/></view>
				<view class="userinfo">
					<view class="nickname">{{item.NickName}}</view>
					<view class="funs"><view class="name">粉丝</view><view class="count">{{item.FunsCount}}</view><view class="distance">{{item.Distance}}</view></view>
					<view class="funs"><view class="name">获赞</view><view class="count">{{item.PraiseCount}}</view></view>
					<view class="brief">{{item.Brief}}</view>
				</view>		
				<view class="city">{{item.City}}</view>
			</view>
			<view class="nodata" v-if="NoData"></view>
			<view class="loadmore">{{Tip}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {			
				Tip:'正在加载...',
				Page:1,
				List:[],
				NoData:false,
				LoadMore:true,
				Keyword:'',
				Lat:0,
				Lng:0,
				Plat:0,
				Type:0,
				CityName:'全国'
			};
		},
		onShow() {
			uni.$once("SelectCity",CityName=>{
				this.CityName=CityName;
				this.Re_Load();
			});
		},
		onLoad() {
			if(uni.getStorageSync("CityName")){
				this.CityName=uni.getStorageSync("CityName");
			}
			uni.getLocation({
			  type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
			  success: res=> {
			    this.Lat = res.latitude; // 纬度，浮点数，范围为90 ~ -90
			    this.Lng = res.longitude; // 经度，浮点数，范围为180 ~ -180。	
				this.Find_Pager();
			  }
			});
			
		},
		methods:{
			ClickPlat(Plat){				
				this.Plat=Plat;
				this.Re_Load();
			},
			ClickType(Type){
				this.Type=Type;
				this.Re_Load();
			},
			ToCity(){
				uni.navigateTo({
					url:'/pages/index/city'
				})
			},
			DaRenInfo(ID){
				uni.navigateTo({
					url:'/pages/darenku/darenkuinfo?ID='+ID
				})
			},
			InputNickName(e){
				this.Keyword = e.detail.value;
			},
			Search(){
				this.Re_Load();
			},
			Find_Pager(){
				var data={};
				data.Act="Find_Blogger";
				data.City=this.CityName;
				data.Plat=this.Plat;
				data.Type=this.Type;
				data.Lat = this.Lat;
				data.Lng = this.Lng;
				data.Page=this.Page;
				data.Keyword=this.Keyword;
				data.Limit=20;
				this.Util.Loading("加载中...");
				this.Util.Post(data, json=>{
					this.Util.HideLoading();
					uni.stopPullDownRefresh();
					this.List= this.List.concat(json.Data.List);
					uni.stopPullDownRefresh();
					if(json.Data.Count==0){
						this.NoData=true;
						this.Tip="还没有任何达人信息";
					}
					else if(this.List.length>=json.Data.Count){
						this.LoadMore=false;
						this.Tip="我是有底线的";
					}
				});
			},
			Re_Load(){
				this.List=[];
				this.Page=1;
				this.NoData=false;
				this.LoadMore=true;
				this.Tip='正在加载...';
				this.Find_Pager();
			}
			
		}
	}
</script>

<style lang="scss">
	.top{width:100%; height:100rpx; display: flex; flex-direction: row; padding-top:15rpx; 
		.position{width:auto; height:70rpx; line-height: 70rpx; display: flex; flex-direction: row; padding-left:10rpx;
			.img{width:50rpx; height: 90rpx; padding-top:12rpx; image{width:50rpx; height:50rpx;}}
			.city{width:auto; height:60rpx;}
		}
		.search{flex:1; height:70rpx; margin-left:25rpx; padding-top:10rpx; padding-left:20rpx; float:left; border-radius: 10rpx; background-color:#ffffff; display: flex; flex-direction: row;
			.icon{width:50rpx; height:50rpx; margin-top:0rpx; image{width:100%; height:100%;}}
			.input{flex:1; padding-left:10rpx;}
		}
		.btn{width:90rpx; height:70rpx; line-height: 70rpx; margin-left:15rpx; margin-right: 20rpx; border-radius: 10rpx; text-align: center; background-color: #ff5732; color:#ffffff;}
	}
	.plat{width:100%; height:160rpx; display: flex; flex-direction: row; justify-content: space-between; padding-left:20rpx; padding-right: 20rpx;
		.line{width:340rpx; height:160rpx; display: flex; flex-direction: row; background-color: #ffffff; border-radius: 10rpx; padding-left:30rpx; padding-top:30rpx;
			.icon{width:100rpx; height:100rpx; image{width:100rpx; height:100rpx;}}
			.name{width:200rpx; height:100rpx; line-height: 100rpx; padding-left:20rpx; font-size:40rpx;}
		}
		.select{background-color: #fd8b72; color:#ffffff;}
	}
	.category{width:100%; height:80rpx; display: flex; flex-direction: row; margin-top:0rpx; padding:20rpx;
		.square1{width:160rpx; height: 80rpx; line-height:80rpx; text-align: center; border-radius: 10rpx; margin-right:20rpx; text-align: center; color:#232323; background-color: #e5e3e3; }
		.square2{width:270rpx; height: 80rpx; line-height:80rpx; text-align: center; border-radius: 10rpx; margin-right:20rpx; text-align: center; color:#232323; background-color: #e5e3e3; }
		.square3{width:270rpx; height: 80rpx; line-height:80rpx; text-align: center; border-radius: 10rpx; margin-right:0rpx; text-align: center; color:#232323; background-color: #e5e3e3; }
		.select{background-color: #fe2840; color:#ffffff;}
	}
	.darenlist{width:710rpx; height:auto; margin-left:20rpx; margin-top:25rpx; float:left;  z-index:1; display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap;
		.list{width:710rpx; height:240rpx; background-color: #ffffff; border-radius: 10rpx; padding:16rpx; margin-top:15rpx; display: flex; flex-direction: row; position: relative; overflow: hidden;
			.headimg{width:180rpx; height:180rpx; float:left; image{width:180rpx; height:180rpx; border-radius: 90rpx;}}
			.userinfo{flex:1; padding-left:20rpx; float:left; 
				.nickname{width:100%; height:46rpx; font-size:34rpx; font-weight: bold; margin-top:-5rpx; margin-bottom: 5rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
				.funs{width:100%; height:42rpx; display: flex; flex-direction: row; font-size:30rpx; .name{width:70rpx; color:#8f8d90;} .count{flex:1;} .distance{width:auto; color:#8f8d90;}}
				.brief{width:100%; height:75rpx; float:left; line-height: 34rpx; border-radius: 10rpx; padding-left:6rpx; padding-right: 6rpx; padding-top:6rpx; margin-top:8rpx; background-color: #fef7ed; color:#4f4f4f; font-size:28rpx; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;}
			}
			.city{width:auto; height: 40rpx; line-height: 40rpx; padding-left:10rpx; padding-right: 10rpx; font-size:24rpx; position: absolute; top:0rpx; right: 0rpx; text-align: center; background-color: #ff5732; color: #ffffff; border-bottom-left-radius: 10rpx;}
			
		}
		.list:active{background-color: #dbdbdb;}
	}
</style>
